<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/project.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    img {
        max-width: 100%;
    !important;
    }
    .detail-params b {
        margin-left: 5px;
    }

    .detail-main {
        margin-bottom: 80px;
        background: #f0f0f0;
        height: 100%;
    }
    .cart-list{
        background: #ffffff;
        margin: 20px 10px;
        margin-bottom: 0px;
        border-radius: 10px;
    }
    .cart-list-left{
        width: 30%;
        float: left;
        margin-left:2%;
    }
    .cart-list-right{
        width: 64%;
        float: right;margin-right: 2%;
    }
    .cart-price{
        color: red;
        float: left;
        font-weight: bold;
    }
    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        /*margin: 20px;*/
        height: 8%;
        font-size: 20px;
    }
    .footer-select{
        width: 45%;
        line-height: 100%;
        float: left;
        margin-left: 5%;
        /*margin-top: 30%;*/
    }
    .footer-btn{
        background-color: #0a53be;
        color: #fff;
        text-align: center;
        width: 50%;
        float: right;
    }
</style>
<body style="background: #f0f0f0;">
<div class="detail-main">
    <div style="height: 50px; background-color: #0a5ba6;width: 100%;color: #FFFFFF">
        <div class="header-text">
            <div style="width: 20%;float: left;padding-top: 18px;padding-left: 10px;" onclick="history.go(-1)">
                <&nbsp;返回
            </div>
            <div style="padding-top: 18px;float: right;padding-left: 75px;width: 80%;">购物车</div>
        </div>
    </div>
    {volist name="cart" id="vl"}
    <div class="row box cart-list" {if $key==0} style="margin-top:20px" {/if}>
        <div class="cart-list-left">
            <img src="{$vl.goods.thumbimage}" style="width: 100%" alt="">
        </div>
        <div class="cart-list-right">
            <div style="margin-top: 8px;">
                <p style="color: red;font-weight: bold">
                    {$vl.goods.title}
                    <span class="badge">{$vl.goods.specs}</span>
                </p>
            </div>
            <div class="box" style="margin-left: 2%">
                <div class="cart-price">
                    <p>单价:￥<span id="price-{$vl.goods.id}-{$key}">{$vl.goods.price}</span></p>
                    <p>总价:￥<span id="money-{$vl.goods.id}-{$key}">{$vl.money}</span></p>
                </div>
                <div style="width: 40%;float: right;margin-right: 5%;margin-top: 10%">
                    <div class="input-group-btn" onclick="cutOne(this)" data-id="{$vl.goods.id}-{$key}" style="width: 25%;float: left">
                        <button class="btn btn-white btn-minuse" type="button">-</button>
                    </div>
                    <input type="text" style="width: 50%;float: left"
                           onblur="countMoney(this)"
                           data-id="{$vl.goods.id}-{$key}"
                           id="pics-{$vl.goods.id}-{$key}"
                           class="form-control" value="{$vl.number}">
                    <div class="input-group-btn" onclick="addOne(this)" data-id="{$vl.goods.id}-{$key}" style="width: 25%;float: left">
                        <button class="btn btn-red btn-pluss" type="button">+</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {/volist}
    <div class="footer">
        <div class="footer-select">
            配送方式
            <select name="" id="deliveryMethod" class="form-select">
                <option value="1">物流</option>
                <option value="2">自提</option>
            </select>
        </div>

        <button class="btn btn-primary btn-lg footer-btn" onclick="createOrder()">
            提交
        </button>
    </div>
</div>

<script>
    function addOne(ad) {
        var itemId=$(ad).data('id');
        var vals = $('#pics-'+itemId).val();
        $('#pics-'+itemId).val(parseInt(vals) + 1);
        $('#pics-'+itemId).blur();
    }

    function cutOne(cd) {
        var itemId=$(ad).data('id');
        var vals = $('#pics-'+itemId).val();
        if (vals <= 1) {
            return false;
        }
        $('#pics-'+itemId).val(parseInt(vals) - 1);
        $('#pics-'+itemId).blur();
    }
    function countMoney(tt){
        var itemId=$(tt).data('id');
        console.log(itemId);
        var itemPrice=parseFloat($('#price-'+itemId).html());
        console.log(itemPrice);
        var number=parseInt($(tt).val());
        var itemMoney=itemPrice*number;
        console.log(itemMoney);
        $('#money-'+itemId).html(itemMoney)
        changeCart(itemId,'e');
    }
    function changeCart(id,type) {
        var number=$('#pics-'+id).val();
        $.ajax({
            url:"{:url('order/changeCart')}",
            type:"POST",
            data:{g:id,t:type,n:number},
            success:function (){
                if(type=="d"){
                    window.location.reload();
                }
            }
        })
    }
    function createOrder(){
        var delivery_method=$('#deliveryMethod').val();
        $.ajax({
            url:"{:url('order/createOrder')}",
            type:"POST",
            data:{delivery_method:delivery_method},
            success:function (){
                if(confirm("已提交是否去查看订单")){
                    window.location.href="{:url('user/order')}"
                }else{
                    window.location.href="{:url('goods/index')}";
                }

            }
        })
    }
</script>
</body>
</html>